<template>
	<view class="main">
		<view class="head">
			<view class="area">
			  <picker @change="PickerChange" :value="index" :range="picker">
			    <view class="picker">{{index>-1?picker[index]:'选择地区'}}<text class="iconfont icon-jiantou1"></text></view>
			  </picker>
			  
			  <view class="search">
				  <text class="iconfont icon-fangdajing"></text>
				  <input placeholder="请输入医院名称" v-model="address" @confirm="query()"></input>
			  </view>
			  
			</view>
			
			<view class="date">
			  <view class="left">选择日期</view>
			  
			  <view class="right">
				  <text class="today" v-bind:class="{ischeck:check==1}" @click="selectDay('today')">今日</text>
				  <text class="tomorrow" v-bind:class="{ischeck:check==2}" @click="selectDay('tomorrow')">明天</text>
				  <picker mode="date" value="getDate" :start="getDate('start')" :end="getDate('end')" class="more" @change="selectDate" >
				    <view class="date-screen">{{appointmentDate}}<text class="iconfont icon-jiantou1"></text></view>
				  </picker>
			  </view>
			  
			</view>
			
			<view class="show" v-if="needlenumArr.length!=0">
				<text class="time green">今日</text>
				<text class="title">可约/总号</text>
				<text class="surplus green">{{totalRemaining}}</text>
				<text class="green">/</text>
				<text class="total green">{{totalCount}}</text>
			</view>
		</view>

		<view class="body">
			<view class="info" v-for="(item,index) in needlenumArr" :key="index">
				<view class="left">
					<image src="../../static/logo.png"></image>
				</view>
				
				<view class="right" @click="itemClick('appointment',index)">
					<view class="title">{{item.address}}</view>
					<view class="tel">{{item.tel}}</view>
					<view class="address">{{item.detailed}}</view>
					<view class="number">
						<text class="day green">今日</text>
						剩余/总号源 
						<text class="sy green">{{item.vaccineOver}}</text>
						<text class="green">/</text>
						<text class="total green">{{item.vaccineTotal}}</text>
					</view>
				</view>
			</view>
			
			<view class="no-data" v-if="needlenumArr.length==0">
				<text>数据为空</text>
			</view>
			
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				index: 0 ,
				check:1,
				picker: ['全珠海', '香洲区','横琴新区','高新区','斗门区','金湾区'],
				vaccineBrandArr : ['北京生物','中国科兴'] ,
				appointmentDate:'更多日期',
				needlenumArr:[],
				needleNum : 1,
				vaccineBrand: '',
				address:'',
				totalRemaining:0 ,
				totalCount:0
			}
		},
		onLoad(options) {
			this.needleNum = options.needleNum;
			this.vaccineBrand = options.vaccineBrand;
		},
		onShow() {
			//this.check=1;
			if(this.check==1) {
				this.selectDay('today') ;
			} else {
				this.selectDay('tomorrow') ;
			}
		},
		methods: {
			itemClick(url,index) {
				
				
				let param = {
					inoculateDate : this.needlenumArr[index].inoculateDate,
					nid : this.needlenumArr[index].nid,
					needleNum : this.needlenumArr[index].needleNum ,
					vaccineBrand : this.needlenumArr[index].vaccineBrand ,
					vaccineOver : this.needlenumArr[index].vaccineOver ,
					vaccineTotal : this.needlenumArr[index].vaccineTotal ,
					address : this.needlenumArr[index].address ,
					detailed : this.needlenumArr[index].detailed,
					tel : this.needlenumArr[index].tel,
					areaName : this.needlenumArr[index].areaName
				} ;
				this.$navTo.toPage(url,param) ;
				// uni.navigateTo({
				// 	url
				// })
			},
			async getNeedlenumList(cond) {
				let that = this ;
				
				const res = await this.$request({
					url:'/api/v1/needlenum/search',
					data:cond ,
					header:{
						'Authorization': 'Bearer ' + this.$getStorageSync("token") 
					},
					method:'GET'
				}) ;
						
				
				if(res.data.code == 401) {
					uni.showToast({
						title:res.data.message,
						duration:3000
					}) ;
					
					setTimeout(function(){
						uni.redirectTo({
							url:'/pages/me/login'
						});
					},3000) ;
					
				} else if(res.data.code==200) {
					this.needlenumArr = res.data.data ;
					
					let vaccineOver = 0 ;
					let vaccineTotal = 0 ;
					
					this.needlenumArr.forEach(function(item){
						vaccineOver = vaccineOver + item.vaccineOver ;
						vaccineTotal = vaccineTotal + item.vaccineTotal ;
					}) ;
					
					that.totalRemaining = vaccineOver ;
					that.totalCount = vaccineTotal ;
					
				} else {
					uni.showToast({
						title:res.data.message
					}) ;
				}
				
			},
			PickerChange(e) {
				this.index = e.detail.value
				this.query() ;
			},
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
						
			    if (type == 'start') {
			        year = year - 5;  //设置年份区间
			    } else if (type == 'end') {
			        year = year + 5;
			    }
			    month = month > 9 ? month : '0' + month;;
			    day = day > 9 ? day : '0' + day;
			    return `${year}-${month}-${day}`;
			},
			selectDate(e){
				this.appointmentDate = e.target.value ;
				//document.querySelector("#appointment_date").innerHTML = dateValue
				this.query() 
			},
			selectDay(type) {
				this.check = type=='today'?1:2 ;
				let n = type=='today'?0:1 ;
				
				let now = new Date() ;
				now.setDate(now.getDate()+n) ;
				
				let y = now.getFullYear() ;
				let m = now.getMonth() + 1;
				let d = now.getDate() ;
				
				m = m > 9 ? m : '0' + m;;
				d = d > 9 ? d : '0' + d;
				
				
				this.appointmentDate = y + '-' + m + '-' + d;
				this.query() ;
			},
			query() {
				
				let cond = {
					//'vaccination.area.areaName' : this.index==0 ? '' : this.picker[this.index] ,
					//'vaccination.address' : this.address,
					areaName : this.index==0 ? '' : this.picker[this.index] ,
					address : this.address,
					needleNum : this.needleNum,
					inoculateDate : this.appointmentDate == '更多日期'?'':this.appointmentDate,
					vaccineBrand : this.vaccineBrand 
				}
				this.getNeedlenumList(cond) ;
			}
		}
	}
</script>

<style lang="scss">
	.green {
		color:#55A532 ;
	}
	
	.main {
		.head {
			width: 100%;
			height: 330rpx;
			box-sizing: border-box;
			padding: 30rpx ;
			position: fixed;
			z-index: 100;
			background-color: #FFF;
			
			.area {
				display: flex;
				
				picker {
					line-height: 80rpx;
					width:30%;
				}
				
				.search {
					position: relative;
					width:70%;
					
					text{
						position: absolute;
						top:15rpx;
						left:50rpx;
						font-size: 50rpx;
						color: #777;
					}
					
					input {
						background-color: #EEE;
						box-sizing: border-box;
						
						width:80%;
						height: 80rpx;
						margin-left: 30rpx;
						border-radius: 20rpx;	
						padding-left: 80rpx;
					}
				}
			}
			
			.date {
				display: flex;
				margin-top: 40rpx;
				
				.left {
					margin-top:18rpx ;
					font-size: 35rpx;
				}
				
				.right {
					display: flex;
					.today {
						margin-left: 20rpx;
						border-radius: 20rpx;
						background-color: #DBDBDB;
						color:#000;
						padding: 16rpx;
					}
					
					.tomorrow {
						margin-left: 20rpx;
						border-radius: 20rpx;
						background-color: #DBDBDB;
						color:#000;
						padding: 16rpx;
					}
					
					.ischeck {
						background-color: #4CD964;
						color:#FFF;
					}
					
					.more {
						margin-left: 20rpx;
						padding: 10rpx;
						
						.appointment_date {
							font-size: 20rpx;
						}
					}
					
					
					
				}
			}
			.show {
				text-align: center;
				margin: 40rpx auto;
				
				.time {
					margin-right: 20rpx;
				}
			
				.surplus {
					margin-left: 20rpx;
				}
			}
		}
		
		.body {
			padding-top: 300rpx;
		}
	}
	
	.info {
		width: 96%;
		background-color: #FFF;
		margin: 10rpx auto;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		
		.left {
			width:20%;
			float:left;
			
			image {
				width:120rpx;
				height:120rpx;
			}
		}
		
		
		.right {
			width:80%;
			margin-left: 20rpx;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
			
			.tel,.address {
				font-size:20rpx;
			}
			
			.number {
				font-size: 30rpx;
				margin-top: 20rpx;
				
				.day {
					margin-right: 20rpx;
					font-weight: bold;
				}
				.sy {
					margin-left: 20rpx;
				}
			}
			
			
			
		}
	}
	
	.no-data {
		text-align: center;
		margin-top: 30rpx;
		color: #808080;
	}
</style>
